import { ConfigProvider, theme } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { RouterProvider } from 'react-router-dom'
import { router } from '@/routes'
import ErrorBoundary from '@/components/ErrorBoundary'
import PerformanceMonitor from '@/components/common/PerformanceMonitor'
import { useEffect } from 'react'
import '@/styles/globals.css'

function App() {
  // 移除初始加载占位符
  useEffect(() => {
    const loading = document.getElementById('app-loading')
    if (loading) {
      loading.style.opacity = '0'
      setTimeout(() => loading.remove(), 300)
    }
  }, [])

  return (
    <ErrorBoundary>
      <ConfigProvider
        locale={zhCN}
        theme={{
          token: {
            colorPrimary: '#1890ff',
            borderRadius: 6,
            fontSize: 14,
            colorSuccess: '#52c41a',
            colorWarning: '#faad14',
            colorError: '#f5222d',
            colorInfo: '#1890ff',
            colorTextBase: '#262626',
            colorBorder: '#d9d9d9',
            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif",
          },
          algorithm: theme.defaultAlgorithm,
        }}
      >
        {/* 性能监控 - 仅开发环境 */}
        {/* TODO: PerformanceMonitor需要在Router内部使用，暂时禁用 */}
        {/* {process.env.NODE_ENV === 'development' && <PerformanceMonitor />} */}

        <RouterProvider router={router} />
      </ConfigProvider>
    </ErrorBoundary>
  )
}

export default App